<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script>VANILLA_VERSION = "{{ version }}";</script>

    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-K7ZB6FL');</script>
    <!-- End Google Tag Manager -->

    <title>{% block title %}{{ title }}{% endblock %}{% if self.title() %} | {% endif %}Vanilla documentation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" type="image/png" sizes="48x48" href="https://assets.ubuntu.com/v1/f1464d22-vanilla_favicon_48px.png"  />
    <!-- Serving favicon for search engines locally -->
    <link rel="icon" type="image/png" sizes="48x48" href="{{ versioned_static("images/favicons/vanilla_favicon_48px.png") }}" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- PWA -->
    <meta name="msapplication-navbutton-color" content="#E7542D">
    <meta name="msapplication-starturl" content="/">
    <!-- Chrome for Android theme color -->
    <meta name="theme-color" content="#E7542D">
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="Vanilla Framework">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Vanilla Framework">
    <!-- Tile for Win8 -->
    <meta name="msapplication-TileColor" content="#E7542D">

    {% if self.description() %}
      <meta name="description" content="{% block description %}{% endblock %}">
    {% endif %}
    {% if self.copydoc() %}
      <meta name="copydoc" content="{% block copydoc %}{% endblock %}" />
    {% endif %}

    {% block custom_head %}
    {% endblock %}

    {% if extra_stylesheet %}
      <link rel="stylesheet" href="{{ versioned_static(extra_stylesheet) }}" />
    {% endif %}
  </head>

  <body class="l-site is-paper">
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K7ZB6FL"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->

    {% include "_layouts/_header.html" %}
    {% block body %}{% endblock %}
    {% if not is_docs %}
      {% include "_layouts/_footer.html" %}
    {% endif %}

    <script src="{{ versioned_static('build/js/modules/cookie-policy.js') }}"></script>
    <script>
      cpNs.cookiePolicy();
    </script>
    <script src="{{ versioned_static('js/scripts.js') }}"></script>

    {% block scripts %}
    {% endblock %}
    <!-- begin usabilla live embed code -->
    <script>/*{literal}<![CDATA[*/window.lightningjs||function(c){function g(b,d){d&&(d+=(/\?/.test(d)?"&":"?")+"lv=1");c[b]||function(){var i=window,h=document,j=b,g=h.location.protocol,l="load",k=0;(function(){function b(){a.P(l);a.w=1;c[j]("_load")}c[j]=function(){function m(){m.id=e;return c[j].apply(m,arguments)}var b,e=++k;b=this&&this!=i?this.id||0:0;(a.s=a.s||[]).push([e,b,arguments]);m.then=function(b,c,h){var d=a.fh[e]=a.fh[e]||[],j=a.eh[e]=a.eh[e]||[],f=a.ph[e]=a.ph[e]||[];b&&d.push(b);c&&j.push(c);h&&f.push(h);return m};return m};var a=c[j]._={};a.fh={};a.eh={};a.ph={};a.l=d?d.replace(/^\/\//,(g=="https:"?g:"http:")+"///"):d;a.p={0:+new Date};a.P=function(b){a.p[b]=new Date-a.p[0]};a.w&&b();i.addEventListener?i.addEventListener(l,b,!1):i.attachEvent("on"+l,b);var q=function(){function b(){return["<head></head><",c,' onload="var d=',n,";d.getElementsByTagName('head')[0].",d,"(d.",g,"('script')).",i,"='",a.l,"'\"></",c,">"].join("")}var c="body",e=h[c];if(!e)return setTimeout(q,100);a.P(1);var d="appendChild",g="createElement",i="src",k=h[g]("div"),l=k[d](h[g]("div")),f=h[g]("iframe"),n="document",p;k.style.display="none";e.insertBefore(k,e.firstChild).id=o+"-"+j;f.frameBorder="0";f.id=o+"-frame-"+j;/MSIE[ ]+6/.test(navigator.userAgent)&&(f[i]="javascript:false");f.allowTransparency="true";l[d](f);try{f.contentWindow[n].open()}catch(s){a.domain=h.domain,p="javascript:var d="+n+".open();d.domain='"+h.domain+"';",f[i]=p+"void(0);"}try{var r=f.contentWindow[n];r.write(b());r.close()}catch(t){f[i]=p+'d.write("'+b().replace(/"/g,String.fromCharCode(92)+'"')+'");d.close();'}a.P(2)};a.l&&setTimeout(q,0)})()}();c[b].lv="1";return c[b]}var o="lightningjs",k=window[o]=g(o);k.require=g;k.modules=c}({});
    window.usabilla_live = lightningjs.require("usabilla_live", "//w.usabilla.com/4f2e23c6debc.js");
    /*]]>{/literal}*/</script>
    <!-- end usabilla live embed code -->
  </body>
</html>
